<template>
  <el-container class="projects-container">
    <el-main class="projects-main">
      <!-- <el-row>
        <el-col :span="24">
          <el-text class="page-title" size="large" tag="strong">AI项目展示中心</el-text>
        </el-col>
        <el-col :span="24">
          <el-text class="page-subtitle" size="small" type="secondary">探索前沿人工智能项目</el-text>
        </el-col>
      </el-row> -->
<!-- 修改 :md="8"    :lg="8"   中屏幕和大屏幕 则改一行展示几个 -->
      <el-row :gutter="20" class="projects-grid">
        <el-col 
          v-for="project in projectsData" 
          :key="project.id"
          :span="24" 
          :md="8" 
          :lg="8"  
          class="project-col"
        >
          <el-card class="project-card" shadow="hover" @click="goToAiProjectDetail(project.id)">
            <el-row class="card-content">
              <!-- 项目图标 -->
              <el-col :span="24" class="icon-col">
                <el-icon :size="32" :color="project.iconColor">
                  <component :is="project.icon" />
                </el-icon>
              </el-col>
              
              <!-- 项目标题 -->
              <el-col :span="24" class="title-col">
                <el-text class="project-name" size="large" tag="strong">{{ project.name }}</el-text>
              </el-col>
              
              <!-- 项目简介 -->
              <el-col :span="24" class="description-col">
                <el-text class="project-description" size="small" type="secondary">
                  {{ project.description }}
                </el-text>
              </el-col>
              
              <!-- 技术标签 -->
              <el-col :span="24" class="tags-col">
                <el-space :size="4" wrap>
                  <el-tag 
                    v-for="tech in project.technologies" 
                    :key="tech"
                    size="small"
                    type="info"
                  >
                    {{ tech }}
                  </el-tag>
                </el-space>
              </el-col>
              
              <!-- 作者信息 -->
              <el-col :span="24" class="author-col">
                <el-text size="small" type="primary">
                  <el-icon :size="14"><User /></el-icon>
                  {{ project.author }}
                </el-text>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { User, Cpu, DataLine, Robot, MagicStick, ChatDotRound } from '@element-plus/icons-vue'
import { AIProjectApi, AIProjectInfo, AIProjectQuery } from '@/api/system/aiproject'
import { useRouter } from 'vue-router'

const router = useRouter()

// AI项目卡片点击
const goToAiProjectDetail = (projectId) => {
  router.push({
    name: 'ArticleDetail',
    params: { id: projectId },
    query: { type: 'ai_project' }
  })
}
// 查询表单
const queryForm = reactive<AIProjectQuery>({
  page: 1,
  pageSize: 10,
  name: '',
  type: '',
  difficulty: undefined
})

// 数据状态
const loading = ref(false)
const projectsData = ref<AIProjectInfo[]>([])

// 查询方法
const loadProjects = async () => {
  try {
    loading.value = true
    const response = await AIProjectApi.getProjectList(queryForm)
    
    projectsData.value = response.data || []
    
  } catch (error) {
    ElMessage.error('获取AI项目列表失败')
  } finally {
    loading.value = false
  }
}
// // 项目数据
// const projectsData = ref([
//   {
//     id: 1,
//     name: '智能对话系统',
//     description: '基于深度学习的自然语言处理对话机器人，支持多轮对话和情感分析',
//     technologies: ['Vue 3', 'Python', 'TensorFlow', 'FastAPI'],
//     author: '张三',
//     icon: 'ChatDotRound',
//     iconColor: '#409EFF'
//   }
// ])
// 组件挂载时获取数据
onMounted(() => {
  loadProjects()
})

</script>

<style scoped>
.projects-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.projects-main {
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-title {
  font-size: 28px;
  color: #303133;
  display: block;
  margin-bottom: 8px;
  text-align: center;
}

.page-subtitle {
  font-size: 16px;
  color: #909399;
  display: block;
  margin-bottom: 30px;
  text-align: center;
}

.projects-grid {
  margin: 0 -10px;
}

.project-col {
  padding: 0 10px;
  margin-bottom: 20px;
}

.project-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 20px;
}

.icon-col {
  text-align: center;
  margin-bottom: 15px;
}

.title-col {
  text-align: center;
  margin-bottom: 10px;
}

.project-name {
  font-size: 18px;
  color: #303133;
}

.description-col {
  margin-bottom: 15px;
  min-height: 60px;
}

.project-description {
  line-height: 1.5;
  text-align: center;
  display: block;
}

.tags-col {
  margin-bottom: 15px;
  text-align: center;
}

.author-col {
  text-align: center;
}

:deep(.el-card__body) {
  padding: 0;
}

@media (max-width: 768px) {
  .projects-main {
    padding: 20px 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .project-col {
    margin-bottom: 15px;
  }
}
</style>